<template>
  <div class="container">
    <waterfallContainer :bottom="20" :column="4" :gap="10" :page-size="20" :request="getData">
      <template #item="{ item, index }">
        <div
          class="card-box"
          :style="{
            background: colorArr[index % (colorArr.length - 1)],
          }"
        >
          <!-- <img :src="item.url" /> -->
        </div>
      </template>
    </waterfallContainer>
  </div>
</template>

<script setup lang="ts">
import waterfallContainer from './components/waterfallContainer.vue'
import data1 from '@/mock/waterfall/dataSource1.json'
import data2 from '@/mock/waterfall/dataSource1.json'
import { ICardItem } from '@/views/waterfall/types'

const colorArr = ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399']

const list1: ICardItem[] = data1.data.items.map((i) => ({
  id: i.id,
  url: i.note_card.cover.url_pre,
  width: i.note_card.cover.width,
  height: i.note_card.cover.height,
}))
const list2: ICardItem[] = data2.data.items.map((i) => ({
  id: i.id,
  url: i.note_card.cover.url_pre,
  width: i.note_card.cover.width,
  height: i.note_card.cover.height,
}))

const list = [...list1, ...list2]

const getData = (page: number, pageSize: number) => {
  return new Promise<ICardItem[]>((resolve) => {
    setTimeout(() => {
      resolve(list.slice((page - 1) * pageSize, page * pageSize))
    }, 1000)
  })
}
</script>

<style lang="scss" scoped>
.container {
  width: 700px;
  height: 600px;
  border: 1px solid red;
}
.card-box {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
</style>
